<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <link rel="stylesheet" th:href="@{/css/doc.min.css}">
    <link rel="stylesheet" th:href="@{/ztree/zTreeStyle.css}">
    <style>
        .tree li {
            list-style-type: none;
            cursor: pointer;
        }
    </style>
</head>

<body>

<div th:replace="~{fragment/header :: head}"></div>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <div th:replace="~{fragment/menu :: left}"></div>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

            <div class="panel panel-default">
                <div class="panel-heading"><i class="glyphicon glyphicon-th-list"></i> 权限菜单列表
                    <div
                            style="float:right;cursor:pointer;" data-toggle="modal" data-target="#myModal"><i
                            class="glyphicon glyphicon-question-sign"></i></div>
                </div>
                <div class="panel-body">
                    <ul id="treeDemo" class="ztree"></ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/jquery/jquery-2.1.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/script/docs.min.js}"></script>
<script th:src="@{/ztree/jquery.ztree.all-3.5.min.js}"></script>
<script th:src="@{/layer/layer.js}" type="text/javascript"></script>
<script th:inline="javascript" type="text/javascript">
    var ctxPath = [[${application.ctxPath}]];
    $(function () {
        $(".list-group-item").click(function () {
            if ($(this).find("ul")) {
                $(this).toggleClass("tree-closed");
                if ($(this).hasClass("tree-closed")) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });

        var setting = {
            view: {
                selectedMulti: false,
                addDiyDom: function (treeId, treeNode) {
                    var icoObj = $("#" + treeNode.tId + "_ico"); // tId = permissionTree_1, $("#permissionTree_1_ico")
                    if (treeNode.icon) {
                        icoObj.removeClass("button ico_docu ico_open").addClass("fa fa-fw " + treeNode.icon).css("background", "");
                    }

                },
                addHoverDom: function (treeId, treeNode) {
                    //   <a><span></span></a>
                    var aObj = $("#" + treeNode.tId + "_a"); // tId = permissionTree_1, ==> $("#permissionTree_1_a")
                    if (treeNode.editNameFlag || $("#btnGroup" + treeNode.tId).length > 0) return;
                    var s = '<span id="btnGroup' + treeNode.tId + '">';
                    if (treeNode.level == 0) {
                        s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" href="#"  onclick="addPermission(' + treeNode.id + ')">&nbsp;&nbsp;<i class="fa fa-fw fa-plus rbg "></i></a>';
                    } else if (treeNode.level == 1) {
                        s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;"  href="#" title="修改权限信息" onclick="editPermission(' + treeNode.id + ')">&nbsp;&nbsp;<i class="fa fa-fw fa-edit rbg "></i></a>';
                        if (treeNode.children.length == 0) {
                            s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" href="#" onclick="removePermission(' + treeNode.id + ')">&nbsp;&nbsp;<i class="fa fa-fw fa-times rbg "></i></a>';
                        }
                        s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" href="#" onclick="addPermission(' + treeNode.id + ')">&nbsp;&nbsp;<i class="fa fa-fw fa-plus rbg "></i></a>';
                    } else if (treeNode.level == 2) {
                        s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;"  href="#" title="修改权限信息" onclick="editPermission(' + treeNode.id + ')">&nbsp;&nbsp;<i class="fa fa-fw fa-edit rbg "></i></a>';
                        s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" href="#" onclick="removePermission(' + treeNode.id + ')">&nbsp;&nbsp;<i class="fa fa-fw fa-times rbg "></i></a>';
                    }

                    s += '</span>';
                    aObj.after(s);
                },
                removeHoverDom: function (treeId, treeNode) {
                    $("#btnGroup" + treeNode.tId).remove();
                }
            },
            async: {
                enable: true,
                url: "tree.txt",
                autoParam: ["id", "name=n", "level=lv"]
            },
            callback: {
                onClick: function (event, treeId, json) {
                        return false;
                }
            }
        };
        //$.fn.zTree.init($("#treeDemo"), setting); //异步访问数据

        var d = [{ "id": 1, "pid": 0, "seqno": 0, "name": "系统权限菜单", "url": null, "icon": "fa fa-sitemap", "open": true, "checked": false, "children": [{ "id": 2, "pid": 1, "seqno": 0, "name": "控制面板", "url": "dashboard.htm", "icon": "fa fa-desktop", "open": true, "checked": false, "children": [] }, { "id": 6, "pid": 1, "seqno": 1, "name": "消息管理", "url": "message/index.htm", "icon": "fa fa-weixin", "open": true, "checked": false, "children": [] }, { "id": 7, "pid": 1, "seqno": 1, "name": "权限管理", "url": "", "icon": "fa fa-cogs", "open": true, "checked": false, "children": [{ "id": 8, "pid": 7, "seqno": 1, "name": "用户管理", "url": "user/index.htm", "icon": "fa fa-user", "open": true, "checked": false, "children": [] }, { "id": 9, "pid": 7, "seqno": 1, "name": "角色管理", "url": "role/index.htm", "icon": "fa fa-graduation-cap", "open": true, "checked": false, "children": [] }, { "id": 10, "pid": 7, "seqno": 1, "name": "许可管理", "url": "permission/index.htm", "icon": "fa fa-check-square-o", "open": true, "checked": false, "children": [] }] }, { "id": 11, "pid": 1, "seqno": 1, "name": "资质管理", "url": "", "icon": "fa fa-certificate", "open": true, "checked": false, "children": [{ "id": 12, "pid": 11, "seqno": 1, "name": "分类管理", "url": "cert/type.htm", "icon": "fa fa-th-list", "open": true, "checked": false, "children": [] }, { "id": 13, "pid": 11, "seqno": 1, "name": "资质管理", "url": "cert/index.htm", "icon": "fa fa-certificate", "open": true, "checked": false, "children": [] }] }, { "id": 15, "pid": 1, "seqno": 1, "name": "流程管理", "url": "process/index.htm", "icon": "fa fa-random", "open": true, "checked": false, "children": [] }, { "id": 16, "pid": 1, "seqno": 1, "name": "审核管理", "url": "", "icon": "fa fa-check-square", "open": true, "checked": false, "children": [{ "id": 17, "pid": 16, "seqno": 1, "name": "实名认证人工审核", "url": "process/cert.htm", "icon": "fa fa-check-circle-o", "open": true, "checked": false, "children": [] }] }] }];
        var data = [[${tree}]]
        console.log(data);
        $.fn.zTree.init($("#treeDemo"), setting, data);
    });

    function addPermission(id) {
        console.log("addPermission" + id);
        window.location.href = ctxPath + "/permission/add.html?id=" + id;
    }
    function editPermission(id) {
        console.log("editPermission" + id);
        window.location.href = ctxPath + "/permission/edit?id=" + id;
    }
    function removePermission(id) {
        console.log("removePermission" + id);
        layer.confirm("你确定要删除吗？", { icon: 3, title: '提示' }, function (index) {
            $.ajax({
                url: ctxPath + "/permission/doDelete",
                type: "POST",
                data: { id: id },
                success: function (data) {
                    console.log(data);
                    window.location.href = ctxPath + "/permission/list";
                },
                error: function (xhr, status, error) {
                    console.log(xhr.responseJSON);
                    layer.msg(xhr.responseJSON, { time: 2000, icon: 5, shift: 6 }, function () { });
                }
            })
        });
    }
</script>
</body>

</html>